
<template>
  <div @click="onClick">
    <van-tabs v-model="id">
      <van-tab
        v-for="item in list"
        :title="item.name"
        :name="item.id"
        :replace="true"
        :to="'/channel/'+item.id"
        :key="item.id"
      >
        <div class="title">
          <div class="t1">{{item.name}}</div>
          <div class="t2">{{item.front_name}}</div>
        </div>
        <div class="goods">
          <Product :goodsList="goodlist"></Product>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { goodsList, CateList } from "@/request/api";
import Product from "@/components/Home/Product.vue";
export default {
  data() {
    return {
      list: [],
      goodlist: [],
      id: Number(this.$route.params.id)
    };
  },
  components: {
    Product
  },
  created() {
    this.onClick();
  },
  methods: {
    onClick() {
      let id = this.$route.params.id;
      CateList({ id: id }).then(res => {
        this.list = res.data.brotherCategory;
      });
      goodsList({ categoryId: id }).then(res => {
        this.goodlist = res.data.goodsList;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  line-height: 30px;
  padding: 20px 0 10px;
  background-color: #f4f4f4;
  .t2 {
    color: #666;
  }
}
.goods {
  margin-top: 10px;
}
</style>